<template>
  <div>
    <div ref="main" class="main">
      <div class="logo">
        <img src="~@/assets/img/logos/netease-music.png" alt="">
      </div>
      <h1>登录网易云账号</h1>
      <div v-if="flag_ewm" class="erweima">
        <div>
          <img :src="qrimg" alt="">
        </div>
        <span
          v-if="regainQr"
          class="regain"
          @click="regainQr"
        >二维码已失效，点击重新获取</span>
        <p>打开网易云音乐APP扫码登录</p>
      </div>
      <div v-else-if="flag_phone" class="login-phone">
        <el-input
          v-model="ByPhone.phone"
          prefix-icon="el-icon-mobile"
          placeholder="手机号"
        />
        <el-input
          v-model="ByPhone.password"
          type="password"
          prefix-icon="el-icon-lock"
          placeholder="密码"
        />
        <button @click="loginByPhone">登录</button>
      </div>
      <div v-else class="login-email">
        <el-input
          v-model="ByEmail.email"
          prefix-icon="el-icon-message"
          placeholder="邮箱"
        />
        <el-input
          v-model="ByEmail.password"
          type="password"
          prefix-icon="el-icon-lock"
          placeholder="密码"
        />
        <button @click="loginByEmail">登录</button>
      </div>
      <div class="footer" @click="type">
        <a v-show="!flag_ewm" href="javaScript:;" class="ewm">二维码登录 </a>
        <span v-show="!flag_email" class="s1">|</span>
        <a v-show="!flag_phone" href="javaScript:;" class="phone">
          手机号登录
        </a>
        <span v-show="flag_email" class="s2">|</span>
        <a v-show="flag_email" href="javaScript:;" class="email"> 邮箱登录</a>
      </div>
    </div>
  </div>
</template>

<script>
import {
  loginByPhone,
  loginByEmail,
  getQrKey,
  createQr,
  checkQr
} from '@/api/user'
import { getUserInfo } from '@/api/MS'
export default {
  data() {
    return {
      ByPhone: {
        phone: '18623530346',
        password: 'tsq123123'
      },
      ByEmail: {
        email: 'mam187123@163.com',
        password: 'meng1994.'
      },
      flag_phone: false,
      flag_ewm: true,
      flag_email: true,
      unikey: '',
      qrimg:
        '~@/assets/img/u=446749718,2417726798&fm=253&fmt=auto&app=138&f=PNG.webp',
      regainQr: false
    }
  },
  async created() {
    await this.getQrKey()
    await this.createQr()
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    type(e) {
      // 清除定时器
      clearInterval(this.timer)
      if (e.target.className === 'phone') {
        // 点击手机登录
        this.flag_phone = true
        this.flag_ewm = false
        this.flag_email = true
        this.$refs.main.style.width = '300px'
      } else if (e.target.className === 'ewm') {
        // 点击二维码登录
        this.flag_ewm = true
        this.flag_phone = false
        this.flag_email = true
        this.$refs.main.style.width = '240px'
        // 调用获取二维码方法
        this.getQrKey()
        this.createQr()
      } else if (e.target.className === 'email') {
        // 点击邮箱登录
        this.flag_phone = false
        this.flag_ewm = false
        this.flag_email = false
        this.$refs.main.style.width = '300px'
      }
    },
    // 手机登录
    async loginByPhone() {
      const res = await loginByPhone(this.ByPhone)
      this.$store.dispatch('getUserInfo', res.data.account)
      this.$store.dispatch('getCookie', res.data.cookie)
      this.getUserInfo()
      this.$router.push('/library')
    },
    // 邮箱登录
    async loginByEmail() {
      const res = await loginByEmail(this.ByEmail)
      this.$store.dispatch('getUserInfo', res.data.account)
      this.$store.dispatch('getCookie', res.data.cookie)
      this.getUserInfo()
      this.$router.push('/library')
      // console.log(res)
    },
    // 获取用户头像
    async getUserInfo() {
      // console.log(this.src)
      const { data } = await getUserInfo(this.$store.state.userInfo.id)
      // console.log(data.profile.avatarUrl)
      // this.src = data.profile.avatarUrl
      this.$store.dispatch('getImg', data.profile.avatarUrl)
    },

    // 获取二维码key
    async getQrKey() {
      const res = await getQrKey()
      // console.log(res)
      this.unikey = res.data.data.unikey
    },
    // 创建二维码
    async createQr() {
      const res = await createQr({ key: this.unikey })
      // console.log(res)
      this.qrimg = res.data.data.qrimg
      this.timer = setInterval(() => {
        this.checkQr()
      }, 1000)
    },
    // 检查二维码状态
    async checkQr() {
      const res = await checkQr({ key: this.unikey })
      if (res.data.code === 803) {
        // 状态码803为已授权登录
        clearInterval(this.timer)
        this.regainQr = false
        this.$router.push('/library')
        this.$store.dispatch('getCookie', res.data.cookie)
      } else if (res.data.code === 800) {
        // 状态码800为二维码已过期
        this.regainQr = true
        clearInterval(this.timer)
      } else {
        this.regainQr = false
      }
    }
  },
  regainQr() {
    this.createQr()
    this.regainQr = false
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 240px;
  margin: 0 auto;
  text-align: center;
  padding-top: 32px;
  input {
    width: 300px;
    height: 46px;
    border-radius: 10px;
    background: #f5f5f7;
    outline: none;
    border: none;
    margin-bottom: 16px;
  }
  /deep/ .el-input__inner {
    width: 300px;
    height: 46px;
    border-radius: 10px;
    background: #f5f5f7;
    outline: none;
    border: none;
    margin-bottom: 16px;
  }
  /deep/.el-input__prefix {
    height: 46px;
  }
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    background-color: #eaeffd;
    color: #335eea;
    border-radius: 8px;
    margin-top: 24px;
    transition: 0.2s;
    padding: 8px;
    width: 100%;
    width: 300px;
    border: none;
    cursor: pointer;
  }
  .login-phone,
  .login-email {
    margin-bottom: 20px;
  }
  .logo {
    width: 64px;
    margin: 20px;
    text-align: center;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 48px;
    color: #000;
    margin-bottom: 48px;
  }
  .erweima {
    width: 230px;
    .regain {
      font-size: 12px;
      color: red;
      cursor: pointer;
    }
    img {
      width: 230px;
      height: 230px;
      background-color: rgb(232, 239, 253);
      padding: 24px 24px 21px 24px;
      border-radius: 1.25rem;
      margin-bottom: 12px;
      // background-color: pink;
      box-sizing: border-box;
    }
    p {
      padding: 12px 0 28px;
      color: #000;
      text-align: center;
    }
  }
  .footer {
    text-align: center;
    font-size: 13px;
    color: #7a7a7b;
    a {
      color: #7a7a7b;
    }
    .s1 {
      padding: 0 5px;
    }
  }
}
</style>
